<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="../css/index.css" />


    <style>
        div {
            background-color: #eee;
            width: 200px;
            height: 50px;
            border: 1px dotted black;
            overflow: auto;
        }
    </style>
</head>

<body>

    <h1>CSS 布局 - Overflow</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.runoob.com/css/css-overflow.html">CSS 布局 - Overflow</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>CSS overflow 属性用于控制内容溢出元素框时显示的方式。</p>

    <h2>可能的值</h2>
    <ul>
        <li><strong>visible</strong> 默认值。内容不会被修剪，会呈现在元素框之外。</li>
        <li><strong>hidden</strong> 内容会被修剪，并且其余内容是不可见的。</li>
        <li><strong>scroll</strong> 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</li>
        <li><strong>auto</strong> 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</li>
        <li><strong>inherit</strong> 规定应该从父元素继承 overflow 属性的值。</li>
    </ul>


    <h2>示例</h2>


    <h3>示例效果</h3>
    <div id="overflowTest">
        <p>这里的文本内容会溢出元素框。11111</p>
        <p>这里的文本内容会溢出元素框。22222</p>
        <p>这里的文本内容会溢出元素框。33333</p>
    </div>

    <h3>示例代码</h3>
    <pre>
&lt;div id=&quot;overflowTest&quot;&gt;
    &lt;p&gt;这里的文本内容会溢出元素框。11111&lt;/p&gt;
    &lt;p&gt;这里的文本内容会溢出元素框。22222&lt;/p&gt;
    &lt;p&gt;这里的文本内容会溢出元素框。33333&lt;/p&gt;
&lt;/div&gt;

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: auto;
}
    </pre>

</body>

</html>